<template>
  <div>
    <web-template>
      <!-- web头部 -->
      <template #header>
        <webHeader />
      </template>
      <!-- web中部 -->
      <template #main>
        <!-- <swiper class="swiper" :options="swiperOption" ref="mySwiper">
          <swiper-slide>
            <img
              src="https://img2.baidu.com/it/u=2517973031,3800078676&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
              alt=""
              style="width: 100%; height: 100%"
            />
          </swiper-slide>
          <swiper-slide>
            <img
              style="width: 100%; height: 100%"
              src="https://img1.baidu.com/it/u=2041884437,3018996815&fm=253&fmt=auto&app=138&f=JPEG?w=1190&h=500"
              alt=""
            />
          </swiper-slide>
          <swiper-slide>
            <img
              style="width: 100%; height: 100%"
              src="https://img1.baidu.com/it/u=3581765316,873633035&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"
              alt=""
            />
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
        <main-content>
          <template #mainContent>
            <div class="technology" style="padding: 30px 0">
              <h1
                class="animate__animated animate__slideInDown"
                style="
                  font-size: 40px;
                  line-height: 44px;
                  color: rgba(0, 0, 0, 0.85);
                  text-align: center;
                  font-weight: 600;
                "
              >
                无人机应用
              </h1>
              <div style="text-indent: 3ch">
                <span
                  style="
                    line-height: 30px;
                    font-size: 18px;
                    color: rgba(0, 0, 0, 0.65);
                  "
                  >无人机技术‌是一种利用先进的无人驾驶飞行器技术、遥感传感器技术、遥测遥控技术、通讯技术、GPS差分定位技术和遥感应用技术的集合，实现自动化、智能化、专用化快速获取国土资源、自然环境、地震灾区等空间遥感信息，并完成遥感数据处理、建模和应用分析的应用技术...</span
                >
              </div>
              <div
                style="
                  width: 100%;
                  display: flex;
                  margin: 30px 0;
                  justify-content: center;
                "
              >
                <div
                  style="width: 30%; position: relative; cursor: pointer"
                  v-for="(item, index) in lists"
                  :key="index"
                  class="img-div animate__animated animate__zoomIn"
                >
                  <img :src="item.url" style="width: 100%; height: 100%" />
                  <span
                    style="
                      position: absolute;
                      left: 50%;
                      top: 25%;
                      font-size: 25px;
                      font-weight: bolder;
                      transform: translate(-50%, -50%);
                      color: #fff;
                      text-shadow: rgb(0, 0, 0) 4px -2px 2px;
                    "
                    >农业领域</span
                  >
                </div>
              </div>
            </div>
            <div class="advantage" style="padding: 30px 0">
              <h1
                class="animate__animated animate__slideInDown"
                style="
                  font-size: 40px;
                  line-height: 44px;
                  color: rgba(0, 0, 0, 0.85);
                  text-align: center;
                  font-weight: 600;
                "
              >
                技术优势
              </h1>
              <div
                style="text-indent: 3ch; display: flex; justify-content: center"
              >
                <span
                  style="
                    line-height: 30px;
                    font-size: 18px;
                    color: rgba(0, 0, 0, 0.65);
                  "
                >
                  无人机技术的优势主要体现在提高安全性和可靠性、增强灵活性和适应性、提高经济性和效率、扩大应用领域、智能化和自适应性提升...</span
                >
              </div>

              <div
                style="
                  width: 100%;
                  display: flex;
                  margin: 30px 0;
                  justify-content: center;
                "
              >
                <div
                  class="img-divs animate__animated animate__zoomIn"
                  style="width: 30%; position: relative; cursor: pointer"
                  v-for="(item, index) in lists2"
                  :key="index"
                >
                  <img
                    :src="item.url"
                    alt=""
                    style="width: 100%; height: 100%"
                  />
                  <span
                    style="
                      position: absolute;
                      left: 50%;
                      top: 25%;
                      font-size: 25px;
                      font-weight: bolder;
                      transform: translate(-50%, -50%);
                      color: #fff;
                      text-shadow: rgb(0, 0, 0) 4px -2px 2px;
                    "
                    >{{ item.title }}</span
                  >
                </div>
              </div>
            </div>
          </template>
        </main-content> -->

        <router-view></router-view>
      </template>
      <!-- web底部 -->
      <template #footer><webFooter /></template>
    </web-template>
  </div>
</template>

<script>
import webTemplate from "@/components/web/web-template.vue";
import webHeader from "../header/web-header.vue";
import webFooter from "../../components/footer/index.vue";
export default {
  components: {
    webTemplate,
    webHeader,
    webFooter,
  },
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
// .swiper {
//   width: 100%;
//   padding: 5vw 0;
// }
.box {
  position: absolute;
  transform: translate(-50%, -50%);
  text-shadow: 2px 2px 2px #000000;
  cursor: pointer;
}

.swiper {
  height: 40vw;
  .swiper-slide {
    background-position: center;
    background-size: cover;

    &.slide-1 {
      background-image: url("/images/example/5.jpg");
    }
    &.slide-2 {
      background-image: url("/images/example/6.jpg");
    }
    &.slide-3 {
      background-image: url("/images/example/7.jpg");
    }
    &.slide-4 {
      background-image: url("/images/example/8.jpg");
    }
    &.slide-5 {
      background-image: url("/images/example/9.jpg");
    }
  }
}

.img-div,
.img-divs {
  margin: 0 0.5%;
  --animate-duration: 3s;
}
.img-div:hover,
.img-divs:hover {
  transform: scale(1.05);
}
</style>